.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  .dialog-content-container {
    background-color: #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    .dialog-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
    .dialog-content {
      
    }
    .dialog-footer {
      background: #FAFAFA;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .avatar {
        border-radius: 50%;
        object-fit: fill;
        background: var(--color-primary);
      }
      .tip {}
      .action {
      }
    }
  }
}

// Mobile
@media screen and (max-width: 767px) {
  .dialog-overlay {
    .dialog-content-container {
      border-radius: 20px;
      overflow: hidden;
      width: 345px;
      max-height: 70vh;
      overflow-y: auto;
      .dialog-header {
        padding: 20px;
      }
      .dialog-content {
        padding: 20px;
      }
      .dialog-footer {
        padding: 20px;
        .avatar {
          width: 50px;
          height: 50px;
        }
        .tip {
          margin-top: 10px;
          font-size: 12px;
        }
        .action {
          margin-top: 0;
        }
      }
    }
  }
}

// Tablet
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .dialog-overlay {
    .dialog-content-container {
      border-radius: 20px;
      overflow: hidden;
      width: 705px;
      max-height: 80vh;
      overflow-y: auto;
      .dialog-header {
        padding: 20px;
      }
      .dialog-content {
        padding: 20px;
      }
      .dialog-footer {
        padding: 20px;
        .avatar {
          width: 50px;
          height: 50px;
        }
        .tip {
          margin-top: 10px;
          font-size: 12px;
        }
        .action {
          margin-top: 0;
        }
      }
    }
  }
}

// Desktop
@media screen and (min-width: 1024px) {
  .dialog-overlay {
    .dialog-content-container {
      border-radius: 20Px;
      width: 620Px;
      max-height: 85vh;
      overflow-y: auto;
      scrollbar-width: none;
      .dialog-header {
        padding: 20Px;
        .close-button {
          cursor: pointer;
        }
      }
      .dialog-content {
        padding: 20Px;
      }
      .dialog-footer {
        padding: 20Px;
        .avatar {
          width: 50Px;
          height: 50Px;
        }
        .tip {
          margin-top: 10Px;
          font-size: 12Px;
        }
        .action {
          margin-top: 0;
        }
      }
    }
  }
}